<template>
    <div class="wrap">
        <head-title :title="headText" @callback="onClickLeft"></head-title>
        <div class="wrapbd">
            <div class="tables">
                <div class="tit"><span>时间</span><span>增减数量</span><span>说明</span></div>
                <ul v-show="showData">
                    <li v-for="(item,index) in listAll" :key="index"><span>{{item.create_time | mdDate}}</span><span :class="{'red': item.status!=1 , 'green': item.status==1}">{{item.status == 1 ? '+':'-'}}{{item.amount}}</span><span>{{item.description}}</span></li>
                    <p v-if="page != pageNum && listAll.length != 0" @click="onLoad">加载更多</p>
                    <p v-if="page == pageNum || listAll.length == 0">没有更多数据</p>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";   
    import { Tab, Tabs, List } from 'vant';
    export default {
        data(){
            return {
                headText:'购物积分',
                listAll:[],
                pageNum:'',  //总页数
                page:1,  //页数
                showData:false,
            }
        },
		mounted(){
            this.initialize() //拉取数据
		},
        methods:{
			//返回
            onClickLeft () { this.$router.push('/user')},
            //拉取数据
            initialize(){
                let _this = this;
				this.Tools.AXIOS({
                    url: 'asset/point',
					transformRequest:{
                        opt: 2,
                        page: this.page || 1,
					},
                    success: function (res) {
                        let result = res.data.data
                        _this.pageNum = result.pageNum;
                        _this.listAll.push(...result.list);
                        _this.showData = true;
                    }
                })
            },
            //分页加载
            onLoad(){
                if(this.page < this.pageNum){
                    this.page++;
                    this.initialize(); 
                }
            },
        },
		components: {
            HeadTitle,
            Tab,
            Tabs,
            List
		},
    }
</script>
<style scoped>
.tables{ padding: 2% 0 0; background: #fff; position: relative;}
.tables ul{ background: #fff; }
.tables li span,.tables div span{ width: 33.33%; float: left; text-align: center; font-size: .35rem; color: #000;}
.tables div span{ padding: .1rem 0;}
.tables li{ padding: .3rem 0; overflow: hidden; border-bottom: 1px solid #F6F6F6;}
.tables .tit{ overflow: hidden; background: #fff; padding: .2rem 0 .3rem; border-bottom: 1px solid #F6F6F6;}
.tables p{ color: #ccc; padding: .35rem 0; text-align: center;}
</style>
